<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div01{
				width: 100px;
				height:100px;
				background-color: #00ff00;
			}
			
			.face {
			  width: 330px;
			  height: 330px;
			  background-image: url('https://preview.qiantucdn.com/agency/dt/xsj/0h/5n/p4.jpg!w1024_new_small_1');
			  background-repeat: no-repeat; 
			}
			
			.face_good {
				background-position: -330px 0;
			}
			
			.face_cha {
				background-position: -340px -320px;
			}
			
           .face_middle {
				background-position: -700px -315px;
			}

		</style>
	</head>
	<body>		  
		<div id="app"> 
		    <h3>v-bind动态绑定属性</h3>
			
			<h4>
				
				<div class="div01" v-bind:style="{ width: form.width+'px', height: form.height + 'px' ,'background-color': form.color}">
					
				</div>
				
				宽<input type="text"  v-model.number="form.width" />
				高<input type="text"  v-model.number="form.height" />
				颜色<input type="color"  v-model="form.color" />
			</h4>
			 
			 <hr/>
			 
			 <h3>成功90以上,显示优秀，75以上一般，否则差</h3>
			 
			 <div class="face" :class="[faceStyle]"></div>
			输入成功<input type="text"  v-model.number="score" />
			 <input type="button"   value="计算结果" @click="calcResult"/>
			 
			 
			 
			 <hr />
			 
			 <span v-pre>{{ 3+4 }}</span>
			 <span >{{ 3+4 }}</span>
			 
		</div>
		
		
		
		
	</body>
	<script src="../js/vue.js"></script>
	
	<script>
		
		const app=new Vue({
			el:"#app",
			// 存放私有数据地址
			data:{
				score: 0,
				 form: {
					 width:100,
					 height:100,
					 color:'#00ff00'
				 },
				 faceStyle: 'face_good'
			},
			methods: {
				 calcResult(){
					 if(this.score>=90) {
						 this.faceStyle='face_good'
					 }else if(this.score>=75) {
						 this.faceStyle='face_middle'
					 }else{
						  this.faceStyle='face_cha'
					 }
				 }
			},
			// vue组件生命周期，初始化
			created() {
				 
			}
		});
		
	</script>
</html>